<template>
    <div>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">添加用户</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="list">立即查询</el-button>
        </el-col>
      </el-row>
      <!-- 添加对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
        <el-form ref="form" :model="cropperForm"  label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户昵称" prop="uname">
                <el-input v-model="cropperForm.uname" placeholder="请输入用户昵称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="tel">
                <el-input v-model="cropperForm.tel" placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="demonstration">部门</span>
              <el-cascader
                  v-model="selectedOptions"
                  :options="options"
                  :props="defaultProps"
                  :show-all-levels="false"
                  placeholder="请选择">
              </el-cascader>
              <p>你选择了: {{selectedValue }}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="角色">
              <el-radio-group v-model="cropperForm.rid">
                <el-radio v-for="r in rids" :label="r.id"  :key="r.id">{{r.name}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="adduser">确 定</el-button>
          <el-button @click="open=false">取 消</el-button>
        </div>
      </el-dialog>
      <el-form  ref="queryForm" size="small" :model="sysUser" label-width="68px">
        <el-form-item  label="用户昵称">
          <el-col :span="5">
            <el-input v-model="sysUser.uname"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            label="用户ID"
            width="100">
        </el-table-column>
        <el-table-column
            prop="uname"
            label="用户名"
            width="100">
        </el-table-column>
        <el-table-column
            prop="tel"
            label="手机号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="rolename"
            label="角色"
            width="150">
        </el-table-column>
        <el-table-column
            prop="deptname"
            label="部门"
            width="150">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="150">
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="handleCurrentChange"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
      <!--      修改对话框-->
      <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
        <el-form :model="cropperForm">
          <el-form-item label="用户名称">
            <el-input v-model="cropperForm.uname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户手机号">
            <el-input v-model="cropperForm.tel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-radio-group v-model="cropperForm.rolename">
              <el-radio v-for="ri in rids" :label="ri.name" :key="ri.id"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="部门">
              <el-select v-model="cropperForm.deptname" placeholder="请选择">
                <el-option v-for="d in dictPlantings" :key="d.id" :label="d.name" :value="d.name"></el-option>
              </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="modifyUsers">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: "UserView",
  data(){
    return{
      tableData:[],
      sysUser:{},
      cropperForm:{},
      title:'',
      open:false,
      size:3,
      total:0,
      current:1,
      rids:[],
      options:[],
      form:{},
      dictPlantings:[],
      rid:'',
      dialogFormVisible:false,
      selectedOptions: [], // 用于存储选中的值（始终是一个数组）
      defaultProps:{
        children: 'children',
        label: 'name',
        value:'id',
      }
    }
  },methods:{
    //删除用户信息
    handleDelete(id){
      alert(id)
      this.axios.get("/user/user/deleteUser",{params:{id:id}}).then(res=>{
          console.log(res)
          this.onSubmit();
      })
    },
    //修改信息(只做添加代码,无删除修改其他代码)
    handleUpdate(row){
      this.dialogFormVisible=true;
      console.log(row)
      this.cropperForm=row;
      this.getdept();
    },
    getdept(){
      this.axios.post("/postservice/posts/list").then(res=>{
        this.dictPlantings=res.data.data;
      })
    },

    modifyUsers(){
      console.log(this.cropperForm);
      console.log(this.selectedValue);
      this.axios.post("/user/user/modifyUsers?rolename="+this.cropperForm.rolename+"&deptname="+this.cropperForm.deptname,this.cropperForm).then(res=>{
        if(res.data){
          this.dialogFormVisible=false;
          this.$message.success("修改成功");
          this.onSubmit()
        }else{
          this.$message.error("修改失败");
        }

      })
    },

    handleAdd(){
      this.open=true;
      this.cropperForm={};
      this.getdepts();
      this.getrids();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.list();
    },
    list(){
      this.axios.post("/user/user/sysUser?current="+this.current+"&size="+this.size,this.sysUser).then(res=>{
        if(res.data.code==200){
          this.tableData=res.data.data.list;
          this.total=res.data.data.total;
        }
      })
    },
    getdepts(){
      this.axios.post("/postservice/posts/deptlist").then(res=>{
        this.options=res.data.data;
      })
    },
    getrids(){
      this.axios.post("/roleservice/role/list").then(res=>{
        this.rids=res.data.data;
      })
    },
    adduser(){
      this.axios.post("/user/user/addsysUser?rid="+this.cropperForm.rid+"&did="+this.selectedValue,this.cropperForm).then(res=>{
        if(res.data.code==200){
          this.open=false;
          this.$message.success(res.data.msg);
          this.list();
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    // handleDelete(row){
    //   this.axios.post("/user/user/deleteUser?id="+row.id).then(res=>{
    //     if(res.data.code==200){
    //       this.open=false;
    //       this.$message.success(res.data.msg);
    //       this.list();
    //     }else{
    //       this.$message.error(res.data.msg);
    //     }
    //   })
    // },
  },created() {
    this.list();
    //自启动
    this.getrids();
  },
  computed: {
    // 计算属性，返回最后一级被选中的值的字符串形式
    selectedValue() {
      if (this.selectedOptions.length > 0) {
        // 假设我们总是关心最后一个选项
        return this.selectedOptions[this.selectedOptions.length - 1].toString();
      }
      return '';
    },
  },
}
</script>

<style scoped>

</style>